<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>答题</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/main.css" />
  <link rel="stylesheet" media="screen and (max-width: 1200px)" href="./css/main-small.css">
  <link rel="stylesheet" type="text/css" href="./libs/intro/introjs.min.css" />
  <link rel="stylesheet" href="./css/myIntro.css">
</head>

<body>
  <div class="main">
    <div class="main-header">
      <!-- <div class="header-title">乡村文旅职业经理人在线考核</div> -->
      <img src="./imgs/乡村文旅职业经理人在线考核.png" alt="">
      <div class="header-right">
        <img src="./imgs/倒计时time-circle.png" style="margin-right: 7px; width: 20px; height: 20px" alt="" />
        <span style="display: inline-block" id="timer"></span>
        <button style="width: 154px" class="button" id="savebtn">交卷</button>
      </div>
    </div>
    <div class="main-body">
      <div class="left">
        <!-- 进度条 -->
        <div class="left-rectangle">
          <div class="left-progress">
            <div class="left-progress-bar"></div>
          </div>
          <div class="left-rectangle-text"></div>
        </div>
        <!-- 图例 -->
        <div class="left-legend">
          <div class="left-legend-item">
            <div class="answered"></div>
            <span>已作答</span>
          </div>
          <div class="left-legend-item">
            <img src="./imgs/标记题上.png" class="signed"></img>
            <span>已标记</span>
          </div>
          <div class="left-legend-item">
            <div class="checked"></div>
            <span>已选中</span>
          </div>
          <div class="left-legend-item">
            <div class="unchecked"></div>
            <span>未作答</span>
          </div>
        </div>
        <!-- 选项列表 -->
        <div class="left-body">
          <div id="view" class="left-body222"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="centre">
        <!-- 答题区域 -->
        <div>
          <iframe width="100%" scrolling="no" frameborder="0" id="subjectIframe"></iframe>
        </div>
        <div class="bottomBtn">
          <div class="lastBtn">上一题</div>
          <div class="nextBtn">下一题</div>
          <div class="signBtn">
            <img src="./imgs/标记题上@2x.png" alt="">
            <span>标记本题</span>
          </div>
          <div class="signedBtn">
            <img src="./imgs/标记题上.png" alt="">
            <span>已标记</span>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 个人信息 -->
        <div class="info" id="infoTip">
          <img src="./imgs/image.png" alt="" class="info-img">
          <div class="info-name">-</div>
          <div class="info-date">-</div>
          <div class="info-date-time">-</div>
        </div>
        <!-- 工具栏 -->
        <div class="action-bar">
          <!-- 帮助 -->
          <div class="action-bar-hint-content">
            <div class="action-bar-hint-content-right">
              <div class="triangle"></div>
              <div class="action-bar-hint-content-title">帮助文档：</div>
              <div class="action-bar-hint-content-text">
                1、电脑端答题请使用谷歌浏览器， 手机端答题可使用微信或QQ打开链接进行作答，或使用第三方浏览器;<br />
                2、请注意检查个人信息、考试科目、考试时间等信息是否正确；<br />
                3、可点击左侧答题卡题号选择试题进行作答，也可点击“上一题”或“下一题”按钮进行切换;<br />
                4、撤销作答的题目，题号显示为灰色;已作答的题目，题号显示为绿色;已标记的题目，题号显示为黄色；<br />
                5、答题完成后，需要点击<span style="color:#42ba7a ;"> “交卷”</span> 按钮进行交卷，否则此次考试无效;<br />
                6.、在规定时间内没有交卷系统将自动交卷。
              </div>
            </div>
          </div>
          <div class="action-bar-hint">
            <img src="./imgs/hint.png" class="action-bar-hint-img" alt="">
            <div class="action-bar-hint-title">帮助文档</div>
          </div>
          <!-- 线 -->
          <div class="action-bar-line"></div>
          <!-- 更改字体工具 -->
          <div class="action-bar-fontSize">
            <div class="action-bar-fontSize-title">字体大小</div>
            <div class="action-bar-fontSize-choose">
              <span class="small">较小</span>
              <span class="normal">标准</span>
              <span class="larger">较大</span>
            </div>
            <div class="action-bar-fontSize-progress">
              <div class="action-bar-fontSize-progress-btn"></div>
            </div>
          </div>
          <!-- 线 -->
          <div class="action-bar-line"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script id="leftBody" type="text/html">
    {{# layui.each(d, function(index1, subject){ }}
    <div class="left-content">
      <div class="left-content-title">
        <span class="left-content-title-content">{{ subject.jgmc}}</span>
      </div>
      <div class="left-content-body">
        {{# layui.each(subject.tmlb, function(index, item){ }}
        <span class="left-content-body-index" data-index="{{index}}" data-sign="{{item.bjzt}}" data-stid="{{item.stid}}" data-answering="{{item.yhda}}" data-type="{{item.stlx}}" data-id="{{item.yhstid}}" data-title="{{subject.jgmc}}">{{index + 1}}</span>
        {{# }); }}
      </div>
    </div>
    {{# }); }}
  </script>
<script src="./libs/jquery.min.js"></script>
<script src="./libs/layui/layui.js"></script>
<script type="text/javascript" src="./libs/intro/intro.min.js"></script>
<script src="./js/home.js" type="text/javascript"></script>

</html>